import React, { memo, useRef, useState } from "react";
import { openNotification_util } from "./shipSRM/util/util";
import { Modal, Button,Input } from "antd";


Storage = window.localStorage

const resetpassword = (({txyhm}) => {

  const [visible, setVisible] = useState(false);
  const [username, setUsername] = useState(txyhm);
  const [phone, setPhone] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');





  const cancelHandle = () => {
    
    setVisible(false);
  };

  

  const handleOk = async () => {

    if (
      !username ||
      !phone ||
      !newPassword ||
      !confirmPassword
    ) {
      openNotification_util("请完整填写当前字段后再点击确定");
      return;
    }

    // 验证手机号格式
    if(!/^1[3-9]\d{9}$/.test(phone)) {
      openNotification_util("请输入正确的手机号格式");
      return;
    }

    try {
      // 验证手机号是否与系统中的一致
      const checkPhoneRes = await fetch('/admin/sys/ifexist_phone', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          phone: phone,
          username: username
        })
      });
      
      const checkData = await checkPhoneRes.json();
      
      if(!checkData.rtstatus) {
        openNotification_util( "您的手机号与系统记录不符");
        return;
      }

      // 验证两次密码是否一致
      if(newPassword !== confirmPassword) {
        openNotification_util("您两次输入的密码不一致");
        return;
      }

      // 提交更新密码
      const updateRes = await fetch('/admin/sys/update_Password', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          phone: phone,
          newPassword: newPassword,
          username: username
        })
      });

      const updateData = await updateRes.json();
      
      if(updateData.rtstatus) {
        openNotification_util("密码修改成功，请输入新密码进行登录！");
        setVisible(false);
        // 清空输入
        setPhone('');
        setNewPassword('');
        setConfirmPassword('');
      } else {
        openNotification_util("密码修改失败");
      }

    } catch(err) {
      openNotification_util("系统错误，请稍后重试");
      console.error(err);
    }

    setVisible(false);
  };

  //样式部分
  return (
    <div>
      
      <Button type="link" style={{width:"12vw",color:"#d3d3d3",fontSize:"1vw",fontWeight:"bold"}} onClick={() => setVisible(true)}>
        忘记密码
      </Button>

      {visible && (
        //弹窗开始
        <Modal
          title="忘记密码"
          open={visible}
          onOk={handleOk} 
          onCancel={() => cancelHandle()}
          width={"40vw"}
          height={"30vw"}
        >
         

         <div style={{width:"40vw",height:"10vh",position:"relative"}}>
              <div style={{ width:"8vw",height:"100%", left:"2vw",position:"absolute"}}>要找回的账号</div>
              <div style={{width:"28vw",height:"100%",position:"absolute",right:"2vw"}}>
              <Input
                
                value={username}
                onChange={e => setUsername(e.target.value)}
               disabled={false}
               placeholder="请输入要找回的账号"
               style={{width:"26vw"}}
             />

              </div>
             
            </div>
            
            
            <div style={{width:"40vw",height:"10vh",position:"relative"}}>
              <div style={{ width:"8vw",height:"100%", left:"2vw",position:"absolute"}}>手机号</div>
              <div style={{width:"28vw",height:"100%",position:"absolute",right:"2vw"}}>
              <Input
                
                value={phone}
                onChange={e => setPhone(e.target.value)}
               placeholder="请输入手机号"
               style={{width:"26vw"}}
             />

              </div>
             
            </div>

            <div style={{width:"40vw",height:"10vh",position:"relative"}}>
              <div style={{ width:"8vw",height:"100%", left:"2vw",position:"absolute"}}>新密码</div>
              <div style={{width:"28vw",height:"100%",position:"absolute",right:"2vw"}}>
              <Input
                type="password"
                value={newPassword}
                onChange={e => setNewPassword(e.target.value)}
                placeholder="请输入新密码"
                style={{width:"26vw"}}
              />
              </div>
            </div>

            <div style={{width:"40vw",height:"10vh",position:"relative"}}>
            <div style={{ width:"8vw",height:"100%", left:"2vw",position:"absolute"}}>确认新密码</div>
            <div style={{width:"28vw",height:"100%",position:"absolute",right:"2vw"}}>
              <Input
                type="password"
                value={confirmPassword}
                onChange={e => setConfirmPassword(e.target.value)}
                placeholder="请再次输入新密码"
                style={{width:"26vw"}}
              />
            </div>
            </div>

            {/* <Button type="primary" style={{width:"18vw",left:"2vw"}} onClick={handleOk}>
              提交
            </Button> */}
        
          
        </Modal>
      )}
    </div>
  );
});

export default resetpassword;